<template>
	<view class="eee pb-120px">
		<view class="header" :style="{position: isFixed ? 'fixed':'relative'}">
			<view class="flex flex-y-center pos">
				<uv-avatar :src="useInfo.avatarUrl" :size="60"></uv-avatar>
				<text class="ml-10px">{{useInfo.nickName}}</text>
				<view class="deltel" @click="deltelFn">
					清除本地缓存
				</view>
			</view>

			<view class="recommend px-20px py-20px my-20px rounded-40px color-white text-24px">
				累计<text class="color-pink">{{cardList.length}}</text>人查看过您的推荐
			</view>

			<uv-subsection :list="state.tabs" :current="current" @change="change"
				custom-style="height: 60rpx;border-radius: 30rpx;" custom-item-style="border-radius: 30rpx;">
			</uv-subsection>
		</view>
		<view style="height: 380rpx;" v-if="isFixed">

		</view>


		<view class="content px-20px" v-if="current==0">
			<view class="wrap p-20px mb-20px rounded-10px flex" v-for="(item,index) in cardList" :key="index">
				<uv-avatar :src="item.avatarUrl" :size="40"></uv-avatar>
				<view class="ml-20px flex-1 text-24px">
					<view class="flex flex-x-between leading-40px">
						<!-- <view>{{item.nickName}} <text class="tag px-10px py-5px ml-5px color-white">未参加</text></view> -->
						<text>{{item.addTimeFormat}}</text>
					</view>
					<view class="flex">
						<view class="mr-210px">
							直推人数：{{item.inviteNum}}
						</view>
						<view>
							阅读人数：0
						</view>
					</view>
				</view>
			</view>
			<view class="rrr">{{UserInfotext}}</view>
			<uv-empty v-if="cardList.length==0" mode="data"
				icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>
		</view>
		<view class="content px-20px" v-if="current==1">
			<view class="wrap p-20px mb-20px rounded-10px flex" :class="statusColorFn(item.statusFormat)" v-for="(item,index) in orderlist" :key="index">
				<view class="ml-20px flex-1 text-24px">
					<view class="flex flex-x-between leading-40px">
						<view>{{item.productName}}</view>
					</view>
					<view class="flex flex-x-between leading-40px">
						<view class="ss">
							产品：{{item.school}}-{{item.class}}
						</view>
						<view class="ss">
							{{item.statusFormat}}: <text :class="colorFn(item.statusFormat)">¥{{item.total}}</text>
						</view>
					</view>
					<view class="flex flex-x-between">
						<view class="ss">
							支付时间：{{item.addTimeFormat}}
						</view>
					</view>
				</view>
			</view>
			<view class="rrr">{{UserOrdertext}}</view>
			<uv-empty v-if="orderlist.length==0" mode="data"
				icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>
		</view>

		<!-- 我的奖品 -->
		<view class="content px-20px" v-if="current==2">
			<view class="wrap p-20px mb-20px rounded-10px flex" v-for="(item,index) in myPrizeList" :key="index">
				<view class="ml-20px flex-1 text-24px">
					<view class="flex flex-x-between leading-40px">
						<view>奖品名称：{{item.prizeName}}</view>
					</view>
					<view class="flex flex-x-between leading-40px">
						<view class="ss">
							活动名称：{{item.productName}}
						</view>
					</view>
					<view class="flex flex-x-between">
						<view class="ss">
							中奖时间：{{item.addTimeFormat}}
						</view>
					</view>
					<!-- 有快递单号 且为实物奖品显示收件地址 -->
					<template v-if='item.expressNo && item.isEntity'>
						<view class="flex flex-x-between">
							<view class="ss">
								快递公司：{{item.expressName}}
								快递单号：{{item.expressNo}}
								收件人：{{item.receiveName}}
								收件人电话：{{item.receivePhone}}
								收件地址：{{item.receiveAddress}}
							</view>
						</view>
					</template>
					<view class="w-200px mt-10px">
						<uv-button v-if="item.isEntity" type="primary" size="small" text="修改收件信息" @click="openReceivingModal(item)"></uv-button>
					</view>
				</view>
			</view>
			<view class="rrr">{{myPrizeText}}</view>
			<uv-empty v-if="myPrizeList.length==0" mode="data"
				icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>
		</view>

		<uv-modal ref="receivingModalRef" title="修改收件信息" :asyncClose="true" showCancelButton @confirm="changeReceiving">
			<view class="slot-content">
				<uv-form labelPosition="left" :model="receivingModalState" :rules="rules" ref="receivingFormRef" labelWidth="100">
					<uv-form-item label="收件人姓名" prop="userName" borderBottom>
						<uv-input v-model="receivingModalState.userName" border="none"></uv-input>
					</uv-form-item>
					<uv-form-item label="联系方式" prop="userPhone" borderBottom>
						<uv-input v-model="receivingModalState.userPhone" border="none" type="number"></uv-input>
					</uv-form-item>
					<uv-form-item label="收件地址" prop="userAddress" borderBottom>
						<uv-input v-model="receivingModalState.userAddress" border="none"></uv-input>
					</uv-form-item>
				</uv-form>
			</view>
		</uv-modal>
	</view>
</template>

<script setup name="Personal">
	import {
		reactive,
		ref
	} from 'vue';
	import {
		onLoad,
		onReachBottom,
		onPageScroll,
	} from "@dcloudio/uni-app";

	import {
		userinfoApi,
		userOrderApi,
		myPrizeListApi,
		changeReceivingApi
	} from '/http/index.js';
	import {
		login
	} from '../../http';
	let useInfo = ref(uni.getStorageSync('userInfo'))
	let isFixed = ref(false)
	let UserOrderTotal = ref(0)
	let UserInfoTotal = ref(0)
	let UserOrdertext = ref('')
	let UserInfotext = ref('')

	let myPrizeTotal = ref(0)
	const myPrizeText = ref('')
	const myPrizePage = reactive({
		pageSize: 10,
		pageIndex: 1,
	})
	const myPrizeList = ref([])

	// 滚动距离
	const scrollTop = ref(null)
	const state = reactive({
		tabs: ['我的粉丝', '我的订单', ' 我的奖品'],
		// 或者如下，也可以配置keyName参数修改对象键名
		// tabs: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
	})
	// 页面滚动
	onPageScroll((e) => {
		// 获取滚动距离
		scrollTop.value = e.scrollTop;
		// 滚动大于0，固定头部
		if (scrollTop.value > 0) {
			isFixed.value = true;
		} else {
			isFixed.value = false;
		}
	})
	// 上拉加载
	onReachBottom(() => {
		if (current == 1) {
			// 努力加载
			UserOrdertext.value = '努力加载中'
			if ((orPage.pageIndex - 1) * orPage.pageSize >= UserOrderTotal.value) {
				UserOrdertext.value = '暂无更多数据'
				return;
			}
			getUserOrder()
		} else if (current == 0) {
			// 努力加载
			UserInfotext.value = '努力加载中'
			if ((fsPage.pageIndex - 1) * fsPage.pageSize >= UserInfoTotal.value) {
				UserInfotext.value = '暂无更多数据'
				return;
			}
			getUserInfo()
		} else if (current == 2) {
			// 努力加载
			myPrizeText.value = '努力加载中'
			if ((myPrizePage.pageIndex - 1) * myPrizePage.pageSize >= myPrizeTotal.value) {
				myPrizeText.value = '暂无更多数据'
				return;
			}
			getMyPrizeList()
		}


	})
	let cardList = ref([])
	let orderlist = ref([])
	let fsPage = reactive({
		pageSize: 10,
		pageIndex: 1,
	});
	let orPage = reactive({
		pageSize: 10,
		pageIndex: 1,
	})

	let current = ref(0)
	const change = (index) => {
		current.value = index
		if (current.value == 0) {
			console.log('切换 个人中心 我的粉丝 接口');
		} else if (current.value == 1) {
			console.log('切换 个人中心 我的红包 接口');
		} else if (current.value == 2) {
			console.log('切换 个人中心 我的奖品 接口');
		}
	}
	const deltelFn = () => {
		uni.clearStorage({
			success: function() {
				uni.showToast({
					title: '清除成功',
					duration: 1000,
					icon: 'none'
				});
			},
			fail: function() {
				uni.showToast({
					title: '清除失败',
					duration: 1000,
					icon: 'none'
				});
			}
		});
	}
	const colorFn = (item) => {
		let colors = ''
		switch (item) {
			case '待付款':
				colors = 'text-color1'
				break;
			case '已支付':
				colors = 'text-color2'
				break;
			case '未核销':
				colors = 'text-color3'
				break;
			default:
				colors = 'text-color4'
		}
		return colors
	}

	const statusColorFn = (item) => {
		let colors = ''
		switch (item) {
			case '待付款':
				colors = 'status-color1'
				break;
			case '已支付':
				colors = 'status-color2'
				break;
			case '未核销':
				colors = 'status-color3'
				break;
			default:
				colors = 'status-color4'
		}
		return colors
	}

	onLoad((option) => {
		state.pageType = option.pageType
		getUserInfo()
		getUserOrder()
		getMyPrizeList()
	})

	const getUserInfo = () => {
		userinfoApi(fsPage).then(res => {
			fsPage.pageIndex++
			cardList.value = [...cardList.value, ...res.items]
			UserInfoTotal.value = res.total
			if (res.total > 10) {
				UserInfotext.value = '上拉加载更多'
			}
		})
	}
	const getUserOrder = () => {
		userOrderApi(orPage).then(res => {
			orPage.pageIndex++
			orderlist.value = [...orderlist.value, ...res.items]
			UserOrderTotal.value = res.total
			if (res.total > 10) {
				UserOrdertext.value = '上拉加载更多'
			}
		})
	}
	// 获取我的奖品列表
	const getMyPrizeList = () => {
		myPrizeListApi(myPrizePage).then(res => {
			myPrizePage.pageIndex++
			myPrizeList.value = [...myPrizeList.value, ...res.items]
			myPrizeTotal.value = res.total
			if (res.total > 10) {
				myPrizeText.value = '上拉加载更多'
			}
		})
	}

	// 打开修改收货信息弹窗
	const receivingModalRef = ref()
	const currentPrizeInfo = ref()//当前奖品
	const openReceivingModal = (prizeInfo)=>{
		receivingModalRef.value.open()
		currentPrizeInfo.value = prizeInfo

		// 初始化弹窗数据为 选择列表数据
		receivingModalState.userName = prizeInfo.receiveName
		receivingModalState.userPhone = prizeInfo.receivePhone
		receivingModalState.userAddress = prizeInfo.receiveAddress
	}

	// 修改收货信息
	const receivingModalState = reactive({
		userName:"",
		userPhone:'',
		userAddress:''
	})
	const rules={
		userName: {
			type: 'string',
			required: true,
			message: '请填写收件人姓名',
			trigger: ['blur', 'change']
		},
		userPhone: {
			type: 'string',
			required: true,
			message: '请填写收件人电话',
			trigger: ['blur', 'change']
		},
		userAddress: {
			type: 'string',
			required: true,
			message: '请填写收件地址',
			trigger: ['blur', 'change']
		},
	}

	const receivingFormRef = ref()
	const changeReceiving = () =>{
		receivingFormRef.value.validate().then(res => {
			const {userId} = currentPrizeInfo.value
			changeReceivingApi({
				userId,
				...receivingModalState
			}).then(res=>{
				console.log(res);
				uni.showToast({
					icon: 'success',
					title: '修改成功'
				})
				receivingModalRef.value.close();
				// 再调用 更新列表
				myPrizePage.pageIndex=1
				myPrizeListApi(myPrizePage).then(res => {
					myPrizeList.value = res.items
					myPrizeTotal.value = res.total
				})
			})
		}).catch(errors => {
			// uni.showToast({
			// 	icon: 'error',
			// 	title: '校验失败'
			// })
			receivingModalRef.value.closeLoading()
		})
	}
</script>

<style lang="scss">
	.eee {
		width: 100%;
		box-sizing: border-box;
	}

	.header {
		width: 100%;
		height: 340rpx;
		padding: 20rpx 20rpx 20rpx;
		box-sizing: border-box;
	}

	:deep(.uv-cell__body) {
		padding: 10rpx 0 !important;
	}

	.recommend {
		background: #050012;
	}

	.wrap {
		background: #f5f5f5;
	}

	.content {
		height: calc(100vh - 400rpx);
		overflow-y: scroll;
		box-sizing: border-box;
	}

	.tag {
		background: #ff5500;
		border-radius: 10px 0 10px 0;
	}

	.text-color1 {
		color: orange;
	}

	.text-color2 {
		color: #118841;
	}

	.text-color3 {
		color: #900000;
	}

	.text-color4 {
		color: #3c9cff;
	}

	.status-color1 {
		background: rgb(255, 222, 161);
		border: 1px solid orange;
	}

	.status-color2 {
		background: #ceffe1;
		border: 1px solid #118841;
	}

	.status-color3 {
		background: #ffd8d8;
		border: 1px solid #900000;
	}

	.status-color4 {
		background: #dceeff;
		border: 1px solid #3c9cff;
	}

	.rrr {
		width: 100%;
		text-align: center;
		position: absolute;
		bottom: 44rpx;
		left: 0;
		font-size: 24rpx;
		color: #ccc;
	}

	.deltel {
		height: 40rpx;
		font-size: 28rpx;
		background-color: #ecebeb;
		color: #6d6b6b;
		border-radius: 10rpx;
		padding: 0 10rpx;
		position: absolute;
		right: 0;

	}

	.pos {
		position: relative;
	}
</style>